<template>
	<view class="yt-txl-container">
		<!-- 	<view class="search">
			<input type="text" @input="inputFunc" class="s-input" placeholder="搜索" />
		</view> -->
		<!-- <u-navbar
				title="通讯录"
				@rightClick="rightClick"
				:autoBack="true"
				:fixed="false"
		>
		</u-navbar> -->
		<!-- <header-search title="通讯录"  :parentObj="{ ...this }" :rightIcon="rightIcon"></header-search> -->
		<!-- <u-navbar
		             title="个人中心"
		             @rightClick="rightClick"
		             :autoBack="true"
		         >
		         </u-navbar> -->
		<!-- <uni-search-bar placeholder="请输入用户名称进行查询" style="background-color: #fff;" @input="inputFunc" @cancel="cancel">
		</uni-search-bar> -->
		<view class="scroll" :style="index ? '' :'right:25upx'">
			<scroll-view :scroll-into-view="to" scroll-y style="width: 100%;height: 100%;">
				<view :id="o.key==='#'?'AA':o.key" v-for="(o,i) in resource" :key="i">
					<view class="p">{{o.key}}</view>
					<view @click="clickFunc(item)" v-for="(item,index) in o.data" class="info" :key="index"
						style="position: relative;">
						<view v-if="item.Icon" class="icon">
							<image :src="item.Icon" mode="aspectFit"></image>
						</view>
						<view v-else :style="'background:'+color" class="icon">
							{{item[name]?item[name].slice(0,1):item.Name.slice(0,1)}}
						</view>
						<view class="item">
							<text class="name">{{nameInfo(item)}}</text>
							<text class="post">{{item.Phone}}</text>
						</view>
						<view class="item" style="text-align: right;position: absolute;right: 15px;z-index: 11;">
							<view>
								<uni-tag text="已注销" type="error" inverted v-if="item.IsLogout" />
								<uni-tag text="使用中" type="success" inverted v-else />
							</view>
						</view>

					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flag" v-if="index">
			<scroll-view scroll-y="true" :show-scrollbar="false" class="flag-scroll" style="width: 100%;height: 100%;">
				<view @click="toFunc(o.key,i)" class="flag-key" v-for="(o,i) in resource" :key="i">
					{{o.key}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	'use strict';
	// 引入顶部navbar组件
	import headerSearch from '@/components/header/header-search.vue'
	import headerTitle from '@/components/header/header-title.vue'
	let pinyin = new(require('./pinyin'))({
		charCase: 0
	});

	export default {
		components: {
			headerTitle,
			headerSearch,
		},
		props: {
			datas: {
				type: Array,
				default () {
					return [];
				}
			},
			name: {
				type: String,
				default () {
					return "name";
				}
			},
			name2: {
				type: String,
				default () {
					return "NickName";
				}
			},
			index: {
				type: Boolean,
				default: true
			},
			color: {
				type: String,
				default: "#f44336"
			}
		},
		data() {
			return {
				// 是否显示右侧删除按钮
				suffixIcon: "close-circle-fill",
				// 用于赋值父组件的plaholder站位
				parentPlaceholder: "",
				// 顶部导航栏得右侧图标
				rightIcon: require('@/static/add.png'),
				resource: [],
				chars: [],
				to: "",
				cache: []
			};
		},
		watch: {
			datas(r) {

				this._parseData(r)
			}
		},
		methods: {
			nameInfo(item) {
				let str = ''
				let str2 = ''
				if (item[this.name]) {
					str = item[this.name] || ''
				} else {
					str = ''
				}
				if (item[this.name2]) {
					str2 = `(${item[this.name2]})`
				} else {
					str2 = ''
				}
				console.log(str + str2);
				return str + str2
			},
			cancel() {},
			toFunc(o, i) {
				this.to = o === '#' ? 'AA' : o
			},
			clickFunc(item) {
				this.$emit("ev", item)
			},
			inputFunc(r) { //搜索功能
				let typeInput = Number(r)
				if (!r) {
					this.resource = this.cache
					return
				}

				let temp = []
				// if(typeof typeInput  == Number){
				// 	console.log('匹配数字形式')
				// 	return
				// }else{
				// 	console.log('匹配字符串形式')
				// 	return
				// }


				this.cache.forEach(o => {
					o.data.forEach(item => {
						// 以下为手机号搜索
						if (item.Phone) {
							if (item.Phone.indexOf(r) != -1) { // 匹配到
								// 确定当前这个元素的key是谁
								let key = o.key
								// 找到temp中的key
								let index = 0 //下标
								let find = false // 数据是否存在
								for (let d in temp) {
									if (temp[d].key === o.key) {
										index = d
										find = true
									}
								}
								if (find) { // 如果key已经存在，直接插入数据
									temp[index].data.push(item)
								} else { // 不存在初始化一个并存入
									temp.push({
										key: o.key,
										data: [item]
									})
								}
							}
						}
						// 以下为名称搜搜
						if (item[this.name]) {
							if (item[this.name].indexOf(r) > -1) { // 匹配到
								// 确定当前这个元素的key是谁
								let key = o.key
								// 找到temp中的key
								let index = 0 //下标
								let find = false // 数据是否存在
								for (let d in temp) {
									if (temp[d].key === o.key) {
										index = d
										find = true
									}
								}
								if (find) { // 如果key已经存在，直接插入数据
									temp[index].data.push(item)
								} else { // 不存在初始化一个并存入
									temp.push({
										key: o.key,
										data: [item]
									})
								}
							}
							if (item.Name.indexOf(r) > -1) { // 匹配到
								// 确定当前这个元素的key是谁
								let key = o.key
								// 找到temp中的key
								let index = 0 //下标
								let find = false // 数据是否存在
								for (let d in temp) {
									if (temp[d].key === o.key) {
										index = d
										find = true
									}
								}
								if (find) { // 如果key已经存在，直接插入数据
									temp[index].data.push(item)
								} else { // 不存在初始化一个并存入
									temp.push({
										key: o.key,
										data: [item]
									})
								}
							}
						}


					})
				})
				this.resource = temp
			},
			_type(val) {
				return Object.prototype.toString.call(val).slice(8, -1).toLowerCase()
			},
			_parseData(r) {
				// 生成a-z的数组
				let data = [];
				this.chars = []
				for (let i = 65; i <= 90; i++) {
					let key = String.fromCharCode(i)
					data.push({
						"key": key,
						data: []
					})
					this.chars.push(key)
				}
				this.chars.push('#')
				data.push({
					"key": '#',
					data: []
				})
				r.forEach(item => {

					if (!this.chars.includes(item.Initial)) {
						if (isNaN(item.Initial)) {
							this.$set(item, 'Initial', item.Initial.toUpperCase())
						} else {
							this.$set(item, 'Initial', '#')
						}

					}
				})

				if (this._type(r) === "array") {
					let arr = []
					// 填充数据
					r.forEach(o => {
						// 找到char的位置
						data.forEach((item, index) => {
							// let a = this._parseChar(o[this.name] || o.Name)
							let a = o.Initial
							if (item.key === a) {
								data[index].data.push(o)
							}
						})
					})
				}
				// 组合最后数据并踢出没有匹配到a-z中的任意数据
				let finalData = []
				for (let i in data) {
					if (data[i].data.length > 0) {
						finalData.push(data[i])
					}
				}
				this.resource = finalData
				this.cache = finalData
				finalData = null
			},
			_parseChar(name) {
				if (Object.prototype.toString.call(name).slice(8, -1) !== 'String') {
					console.error("name is not string")
					return
				}
				let chars = pinyin.getFullChars(name);
				return chars[0].toUpperCase()
			}
		},
		mounted() {
			this._parseData(this.datas)
		}
	};
</script>

<style>
	.active {
		margin-left: 10rpx;
	}

	page {
		background: #f4f4f4;
	}

	.search {
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s-input {
		width: 700upx;
		height: 80upx;
		background: url('') 20upx center no-repeat #fff;
		background-size: 40upx;
		text-indent: 80upx;
	}

	.scroll {
		position: absolute;
		left: 25upx;
		top: 120upx;
		right: 100upx;
		bottom: 25upx;
	}

	.p {
		position: sticky;
		top: 0;
		left: 0;
		background: #f4f4f4;
		font-size: 28upx;
		margin-bottom: 10upx;
		text-indent: 40upx;
		z-index: 99998;
		font-weight: bold;
	}

	.info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10upx;
		padding: 20upx 25upx;
		background: #fff;
	}

	.icon {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		margin-right: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		color: #fff;
		overflow: hidden;
	}

	.icon image {
		width: 100%;
		height: 100%;
	}

	.item {
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.flag {
		width: 50upx;
		position: absolute;
		top: 120upx;
		right: 25upx;
		bottom: 25upx;
	}

	.flag-scroll {
		padding-top: 10upx;
	}

	.flag-key {
		padding: 0;
		margin: 0 auto 10upx auto;
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
		color: #000;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20upx;
	}
</style>